<div class="page">

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Hover</h2>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body padding-lg-h">

                    <div class="row">
                        <div class="col-md-4">
                            <div class="ih-item ih-material">
                                <a href="javascript:;">
                                    <div class="img">
                                        <img src="images/assets/600_400-1.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="info-mask bg-primary"></div>
                                        <div class="info-content">
                                            <div class="info-inner">
                                                <h3>Heading Here</h3>
                                                <p>Description goes here</p>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>                            
                        </div>
                        <div class="col-md-4">
                            <div class="ih-item ih-material">
                                <a href="javascript:;">
                                    <div class="img">
                                        <img src="images/assets/600_400-2.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="info-mask bg-info"></div>
                                        <div class="info-content">
                                            <div class="info-inner">
                                                <h3>Heading Here</h3>
                                                <p>Description goes here</p>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>                              
                        </div>
                        <div class="col-md-4">
                            <div class="ih-item ih-material">
                                <a href="javascript:;">
                                    <div class="img">
                                        <img src="images/assets/600_400-4.jpg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="info-mask bg-dark"></div>
                                        <div class="info-content">
                                            <div class="info-inner">
                                                <h3>Heading Here</h3>
                                                <p>Description goes here</p>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>                              
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Modal</h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default">
                <div class="panel-body" data-ng-controller="ModalDemoCtrl">
                    <script type="text/ng-template" id="myModalContent.html">
                        <div class="modal-header">
                            <h3>I am a modal!</h3>
                        </div>
                        <div class="modal-body">
                            <span ng-repeat="item in items" class="list-unstyled">
                                <label class="ui-radio"><input name="radio1" type="radio" value="{{ item }}"  ng-checked="selected.item === item" ng-click="selected.item = item"><span>{{ item }}</span></label>
                            </span>
                            <div class="callout callout-info">
                                Selected: <b>{{ selected.item }}</b>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button ui-wave class="btn btn-flat btn-default" ng-click="cancel()">Cancel</button>
                            <button ui-wave class="btn btn-flat btn-primary" ng-click="ok()">OK</button>
                        </div>
                    </script>

                    <button ui-wave class="btn btn-raised btn-w-md btn-primary" ng-click="open()">Open me!</button>
                    <span class="space"></span>
                    <button ui-wave class="btn btn-raised btn-w-md  btn-info" ng-click="open()">Open me!</button>
                    <div class="divider"></div>
                    <div class="callout callout-info">
                        <p>Selection from a modal: <strong>{{ selected }}</strong></p>
                    </div>
                </div>
            </section>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Loader</h2>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default panel-labeld">
                <div class="panel-body" data-ng-controller="LoaderCtrl">
                    <a ui-wave href="" ng-click="start()" class="btn btn-raised btn-w-md btn-primary btn-w-md btn-gap">Start the loader </a>
                    <a ui-wave href="" ng-click="set()" class="btn btn-raised btn-w-md btn-success btn-w-md btn-gap">Set to 30%</a>
                    <a ui-wave href="" ng-click="complete()" class="btn btn-raised btn-w-md btn-danger btn-w-md btn-gap">Complete it</a>

                    <div class="callout callout-info no-margin-bottom">
                        The loading bar will show at the top of the page.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Pagination</h2>
        </div>
        <div class="col-md-12" data-ng-controller="PaginationDemoCtrl">
            <div class="row">
                <div class="col-md-6">
                    <section class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <pagination class="pagination-sm" direction-links="true" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages" previous-text="&lsaquo;" next-text="&rsaquo;"></pagination>
                            <br>
                            <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
                            <br>
                            <pagination class="pagination-lg" total-items="totalItems" ng-model="currentPage" previous-text="&lsaquo;" next-text="&rsaquo;"></pagination>
        <!--                     <div class="callout callout-info">
                                <p>The selected page no: {{currentPage}}</p>
                            </div>
                            <br>
                            <button ui-wave class="btn btn-primary" ng-click="setPage(3)">Set current page to: 3</button> -->
                            <span class="panel-label">Sizing</span>           
                        </div>
                    </section>                    
                </div>
                <div class="col-md-6">
                    <section class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" previous-text="&lsaquo;" next-text="&rsaquo;"></pagination>
                            <br>
                            <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" previous-text="&lsaquo;" next-text="&rsaquo;"></pagination>
                            <div class="callout callout-info">
                                <p class="no-margin">Page: {{bigCurrentPage}} / {{numPages}}</p>
                            <span class="panel-label">Limit the Maximum Visible Buttons</span>           
                        </div>
                    </section>                    
                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Toast</h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default">
                <div class="panel-body" data-ng-controller="NotifyCtrl">
                    <button ui-wave class="btn btn-raised btn-w-md btn-gap btn-info" data-ng-click="notify('info')">info message</button>
                    <button ui-wave class="btn btn-raised btn-w-md btn-gap btn-success" data-ng-click="notify('success')">success message</button>
                    <button ui-wave class="btn btn-raised btn-w-md btn-gap btn-warning" data-ng-click="notify('warning')">warning message</button>
                    <button ui-wave class="btn btn-raised btn-w-md btn-gap btn-danger" data-ng-click="notify('error')">error message</button>
                    <div class="callout callout-info">
                        <p>Notification will show in lower right corner.</p>
                    </div>
                </div>
            </section>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Labels & Badges</h2>
        </div>
        <div class="col-md-12">
            <div class="row text-center">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <span class="panel-label">Labels</span>
                            <p>
                                <span class="label label-default">Default label</span>
                                <span class="space"></span>
                                <span class="label label-primary">Primary</span>
                                <span class="space"></span>
                                <span class="label label-success">Success</span>
                            </p>
                            <p>
                                <span class="label label-info">Info</span>
                                <span class="space"></span>
                                <span class="label label-warning">Warning</span>
                                <span class="space"></span>
                                <span class="label label-danger">Danger</span> 
                            </p>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <p>
                                <span class="badge">7</span>
                                <span class="space"></span>
                                <span class="badge badge-primary">1</span>
                                <span class="space"></span>
                                <span class="badge badge-success">2</span>
                            </p>
                            <p>
                                <span class="badge badge-info">4</span>
                                <span class="space"></span>
                                <span class="badge badge-warning">8</span>
                                <span class="space"></span>
                                <span class="badge badge-danger">16</span>                                 
                            </p>
                            <span class="panel-label">Badges</span>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Popover & Tooltip</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <section class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <button ui-wave popover-placement="top" popover-title="The Popover Title" popover="On the Top! Here' goes the popover content..." popover-append-to-body="true" class="btn btn-w-lg btn-danger btn-gap">Popover on Top</button>
                            <br>
                            <button ui-wave popover-placement="right" popover-title="The Popover Title" popover="On the Right! Here' goes the popover content..." popover-append-to-body="true" class="btn btn-w-lg btn-warning btn-gap">Popover on Right</button>
                            <br>
                            <button ui-wave popover-placement="bottom" popover-title="The Popover Title" popover="On the Bottom! Here' goes the popover content..." popover-append-to-body="true" class="btn btn-w-lg btn-info btn-gap">Popover on Bottom</button>
                            <br>
                            <button ui-wave popover-placement="left" popover-title="The Popover Title" popover="On the Left! Here' goes the popover content..." popover-append-to-body="true" class="btn btn-w-lg btn-success btn-gap">Popover on Left</button>
                            <br>
                            <button ui-wave popover="On mouse enter!" popover-trigger="mouseenter" class="btn btn-w-lg btn-primary btn-gap">Popover on Mouseenter</button>
                            <div class="divider"></div>
                            <input type="text" value="Popover on Click" popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control">
                            <span class="panel-label">Popover</span>
                        </div>
                    </section>
                </div>
                <div class="col-md-6">
                    <section class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <button ui-wave class="btn btn-w-lg btn-default btn-gap" tooltip-placement="top" tooltip="On the Top!" tooltip-append-to-body="true">Tooltip on Top</button>
                            <br>
                            <button ui-wave class="btn btn-w-lg btn-primary btn-gap" tooltip-placement="left" tooltip="On the Left!" tooltip-append-to-body="true">Tooltip on Left</button>
                            <br>
                            <button ui-wave class="btn btn-w-lg btn-success btn-gap" tooltip-placement="right" tooltip="On the Right!" tooltip-append-to-body="true">Tooltip on Right</button>
                            <br>
                            <button ui-wave class="btn btn-w-lg btn-danger btn-gap" tooltip-animation="false" tooltip="I don't fade. :-(" tooltip-append-to-body="true">Without Animation</button>
                            <br>
                            <button ui-wave class="btn btn-w-lg btn-warning btn-gap" tooltip-popup-delay='1000' tooltip='Appears with delay' tooltip-append-to-body="true">Tooltip Delayed</button>
                            <br>
                            <button ui-wave class="btn btn-w-lg btn-info btn-gap" tooltip-placement="bottom" tooltip="On the Bottom!" tooltip-append-to-body="true">Tooltip on Bottom</button>
                            <span class="panel-label">Tooltip</span>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Tabs</h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default">
                <div class="panel-body" data-ng-controller="TabsDemoCtrl">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="section-header">
                                <h4>Simple Tabs</h4>
                            </div>
                            <tabset class="ui-tab">
                                <tab heading="Static title">Static content here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quidem, officiis, et ex laudantium sed cupiditate voluptatum libero nobis sit illum voluptates beatae ab et at.</tab>
                                <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
                                    {{tab.content}}
                                </tab>
                            </tabset>
                        </div>

                        <div class="col-md-6">
                            <div class="section-header">
                                <h4>Justified Tabs</h4>
                            </div>
                            <tabset justified="true" class="ui-tab">
                                <tab heading="Justified">Justified content</tab>
                                <tab heading="SJ">Short Labeled Justified content</tab>
                                <tab heading="Long Justified">Long Labeled Justified content</tab>
                            </tabset>
                        </div>
                    </div>

                    <div class="divider divider-lg"></div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="section-header">
                                <h4>Horizontal Tabs</h4>
                            </div>
                            <div class="ui-tab-container ui-tab-horizontal">
                                <tabset justified="false" class="ui-tab">
                                    <tab heading="Home dolor">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.</p>
                                        <p>Consectetur adipisicing elit. Reprehenderit enim obcaecati inventore, beatae corporis voluptate, repudiandae voluptatum nesciunt ipsam provident aliquam accusamus assumenda est, veritatis molestias velit non minus laudantium.</p>
                                    </tab>
                                    <tab heading="Quod ea">
                                        <p>Quod ea vel dolores earum veritatis quae sunt tempore odit molestias sit optio quaerat cupiditate iure repudiandae illum doloremque consectetur incidunt!</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.</p>
                                    </tab>
                                    <tab heading="Earum sequi">
                                        <p>Blanditiis tenetur harum distinctio voluptate asperiores non magnam delectus. Consequatur, deleniti rem magnam possimus necessitatibus iusto suscipit mollitia rerum.</p>
                                        <p>Quod ea vel dolores earum veritatis quae sunt tempore odit molestias sit optio quaerat cupiditate iure repudiandae illum doloremque consectetur incidunt!</p>
                                    </tab>
                                </tabset>
                            </div>                     
                        </div>
                        <div class="col-md-6">
                            <div class="section-header">
                                <h4>Vertical Tabs</h4>
                            </div>
                            <div class="ui-tab-container ui-tab-vertical">
                                <tabset class="ui-tab">
                                    <tab heading="Home dolor">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.</p>
                                        <p>Consectetur adipisicing elit. Reprehenderit enim obcaecati inventore, beatae corporis voluptate, repudiandae voluptatum nesciunt ipsam provident aliquam accusamus assumenda est, veritatis molestias velit non minus laudantium.</p>
                                        <p>Blanditiis tenetur harum distinctio voluptate asperiores non magnam delectus. Consequatur, deleniti rem magnam possimus necessitatibus iusto suscipit mollitia rerum.</p>
                                    </tab>
                                    <tab heading="Quod ea">
                                        <p>Quod ea vel dolores earum veritatis quae sunt tempore odit molestias sit optio quaerat cupiditate iure repudiandae illum doloremque consectetur incidunt!</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.</p>
                                        <p>Consectetur adipisicing elit. Reprehenderit enim obcaecati inventore, beatae corporis voluptate, repudiandae voluptatum nesciunt ipsam provident aliquam accusamus assumenda est, veritatis molestias velit non minus laudantium.</p>
                                    </tab>
                                    <tab heading="Earum sequi">
                                        <p>Blanditiis tenetur harum distinctio voluptate asperiores non magnam delectus. Consequatur, deleniti rem magnam possimus necessitatibus iusto suscipit mollitia rerum.</p>
                                        <p>Quod ea vel dolores earum veritatis quae sunt tempore consectetur adipisicing elit. Suscipit, odit molestias sit optio quaerat cupiditate iure repudiandae illum doloremque consectetur incidunt!</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.</p>
                                    </tab>
                                </tabset>
                            </div>                     
                        </div>
                    </div>

                </div>
            </section>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Accordion or Collapse</h2>
        </div>
        <div class="col-md-12">
            <div class="row" data-ng-controller="AccordionDemoCtrl">
                <div class="col-md-6">
                    <section class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <accordion close-others="oneAtATime" class="ui-accordion">
                                <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen">
                                    This content is straight in the template.
                                </accordion-group>
                                <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
                                    {{group.content}}
                                </accordion-group>
                            </accordion>
                            <span class="panel-label">Accordion</span>
                        </div>
                    </section>
                </div>
                <div class="col-md-6">
                    <section class="panel panel-default panel-labeled">
                        <div class="panel-body">                
                            <accordion close-others="!oneAtATime" class="ui-accordion">
                                <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen1">
                                    This content is straight in the template.
                                </accordion-group>
                                <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
                                    {{group.content}}
                                </accordion-group>
                            </accordion>
                            <span class="panel-label">Collapse</span>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Progressbar</h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default">
                <div class="panel-body" data-ng-controller="ProgressDemoCtrl">
                    <div class="page-header">
                        <h3>Static Progressbar</h3>
                    </div>
                    <progressbar class="progressbar-sm progress-rounded" value="34" type="success"></progressbar>
                    <progressbar class="progressbar-sm progress-rounded" value="68" type="info"></progressbar>
                    <progressbar class="progressbar-sm progress-rounded" value="52" type="warning"></progressbar>
                    <progressbar class="progressbar-sm progress-rounded" value="77" type="danger"></progressbar>
                    <p class="text-muted">Stacked Progress Bars</p>
                    <progress class="progressbar-sm progress-rounded">
                        <bar value="40" type="success"></bar>
                        <bar value="20" type="warning"></bar>
                        <bar value="20" type="danger"></bar>
                    </progress>            

                    <div class="page-header">
                        <h3>Striped Progressbar</h3>
                    </div>
                    <progressbar class="progressbar-sm progress-rounded progress-striped" value="34" type="success"></progressbar>
                    <progressbar class="progressbar-sm progress-rounded progress-striped" value="68" type="info"></progressbar>
                    <progressbar class="progressbar-sm progress-rounded progress-striped" value="52" type="warning"></progressbar>
                    <progressbar class="progressbar-sm progress-rounded progress-striped" value="77" type="danger"></progressbar>
                    <p class="text-muted">Animated Progress Bars</p>
                    <progressbar class="progressbar-sm progress-rounded progress-striped active" value="55"></progressbar>
                    <progress class="progressbar-sm progress-rounded progress-striped active">
                        <bar value="40" type="success"></bar>
                        <bar value="20" type="warning"></bar>
                        <bar value="20" type="danger"></bar>
                    </progress> 

                    <div class="page-header">
                        <h3>Dynamic Progressbar</h3>
                    </div>
                    <progressbar class="progress-rounded" max="max" value="dynamic"><span>{{dynamic}} / {{max}}</span></progressbar>

                    <p class="text-muted">No animation</p>
                    <progressbar class="progress-rounded" animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>

                    <p class="text-muted">Object <em>(changes type based on value)</em></p>
                    <progressbar class="progress-striped progress-rounded active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></progressbar>
                    <div class="divider"></div>
                    <button ui-wave class="btn btn-raised btn-sm btn-primary" type="button" ng-click="random()">Randomize</button>
                </div>
            </section>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Collapse</h2>
        </div>
        <div class="col-md-12">

            <section class="panel panel-default">
                <div class="panel-body" data-ng-controller="CollapseDemoCtrl">
                    <button ui-wave class="btn btn-raised btn-primary" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
                    <div class="divider divider-md"></div>
                    <div collapse="isCollapsed">
                        <div class="well well-lg">Some content</div> 
                    </div>            
                </div>
            </section>

        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Alert</h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default">
                <div class="panel-body" data-ng-controller="AlertDemoCtrl">
                    <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
                    <button ui-wave class='btn btn-w-md btn-raised btn-primary' ng-click="addAlert()">Add Alert</button>
                </div>
            </section>
        </div>
    </div>

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Ribbons</h2>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="panel panel-default ui-ribbon-container">
                                <div class="ui-ribbon-wrapper">
                                    <div class="ui-ribbon">
                                        30% Off
                                    </div>
                                </div>
                                <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Ribbon</div>
                                <div class="panel-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default ui-ribbon-container ui-ribbon-primary">
                                <div class="ui-ribbon-wrapper">
                                    <div class="ui-ribbon">
                                        30% Off
                                    </div>
                                </div>
                                <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Ribbon-primary</div>
                                <div class="panel-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default ui-ribbon-container ui-ribbon-success">
                                <div class="ui-ribbon-wrapper">
                                    <div class="ui-ribbon">
                                        30% Off
                                    </div>
                                </div>
                                <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Ribbon-success</div>
                                <div class="panel-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="panel panel-default ui-ribbon-container ui-ribbon-info">
                                <div class="ui-ribbon-wrapper">
                                    <div class="ui-ribbon">
                                        30% Off
                                    </div>
                                </div>
                                <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Ribbon-info</div>
                                <div class="panel-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default ui-ribbon-container ui-ribbon-warning">
                                <div class="ui-ribbon-wrapper">
                                    <div class="ui-ribbon">
                                        30% Off
                                    </div>
                                </div>
                                <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Ribbon-warning</div>
                                <div class="panel-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default ui-ribbon-container ui-ribbon-danger">
                                <div class="ui-ribbon-wrapper">
                                    <div class="ui-ribbon">
                                        30% Off
                                    </div>
                                </div>
                                <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Ribbon-danger</div>
                                <div class="panel-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Panels</h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default">
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            Panel content
                        </div>
                        <div class="panel-footer">Panel footer</div>
                    </div>
                    <div class="panel panel-dark">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                    <div class="panel panel-warning">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Callout</h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default">
                <div class="panel-body">
                    <div class="callout callout-success">
                        <h4>Callout heading</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?</p>
                    </div>
                    <div class="callout callout-info">
                        <h4>Callout heading</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?</p>
                    </div>
                    <div class="callout callout-warning">
                        <h4>Callout heading</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?</p>
                    </div>
                    <div class="callout callout-danger">
                        <h4>Callout heading</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?</p>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Well</h2>
        </div>
        <div class="col-md-12">
            <section class="panel panel-default">
                <div class="panel-body">
                    <div class="well well-sm">Look, I'm in a small well!</div>
                    <div class="well">Look, I'm in a well!</div>
                    <div class="well well-lg">Look, I'm in a large well!</div>
                </div>
            </section>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Scrollable Box</h2>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="panel panel-default">
                                <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Scrollable Box</div>
                                <div class="panel-body ui-map " data-slim-scroll data-scroll-height="200px">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, tenetur, repellat obcaecati unde esse doloribus accusamus exercitationem vitae corporis blanditiis aspernatur quibusdam porro rerum voluptatum quos eligendi necessitatibus enim! Maiores, doloribus, fuga, perspiciatis cupiditate aperiam repellendus natus nisi recusandae rerum optio consectetur nemo reprehenderit nesciunt molestiae at. Molestiae, nesciunt inventore dignissimos itaque exercitationem vero aliquam provident aperiam repudiandae nostrum. Ipsa, possimus, natus culpa magni rem iusto ut quisquam cupiditate aspernatur nemo sed aliquam quam illum illo quos dolor animi ipsum dolorem sunt beatae officia facere voluptatem omnis! Sapiente, illo voluptatibus amet omnis optio labore nesciunt porro facere praesentium laudantium molestiae voluptas eos incidunt quod nulla. Provident, debitis, odit qui ab facere adipisci laborum ea necessitatibus sapiente voluptatibus minima inventore veritatis unde nemo ipsa quisquam dolorum autem et minus repudiandae nostrum aliquam numquam aperiam similique vero delectus maiores non aliquid laboriosam eius impedit cum vel a corporis consequuntur natus earum suscipit. Repellat, laborum, cupiditate aperiam distinctio vero dolor est quibusdam sit rerum expedita tempore reiciendis quidem quisquam deserunt autem pariatur eos fugiat qui hic temporibus ullam dicta voluptatem sequi at iusto! Accusamus, iure, optio temporibus molestiae ab dolor blanditiis veritatis corporis eius reiciendis sed molestias obcaecati dolorem similique rerum illo excepturi.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="panel panel-default">
                                <div class="panel-body ui-map " data-slim-scroll data-scroll-height="240px">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, tenetur, repellat obcaecati unde esse doloribus accusamus exercitationem vitae corporis blanditiis aspernatur quibusdam porro rerum voluptatum quos eligendi necessitatibus enim! Maiores, doloribus, fuga, perspiciatis cupiditate aperiam repellendus natus nisi recusandae rerum optio consectetur nemo reprehenderit nesciunt molestiae at. Molestiae, nesciunt inventore dignissimos itaque exercitationem vero aliquam provident aperiam repudiandae nostrum. Ipsa, possimus, natus culpa magni rem iusto ut quisquam cupiditate aspernatur nemo sed aliquam quam illum illo quos dolor animi ipsum dolorem sunt beatae officia facere voluptatem omnis! Sapiente, illo voluptatibus amet omnis optio labore nesciunt porro facere praesentium laudantium molestiae voluptas eos incidunt quod nulla. Provident, debitis, odit qui ab facere adipisci laborum ea necessitatibus sapiente voluptatibus minima inventore veritatis unde nemo ipsa quisquam dolorum autem et minus repudiandae nostrum aliquam numquam aperiam similique vero delectus maiores non aliquid laboriosam eius impedit cum vel a corporis consequuntur natus earum suscipit. Repellat, laborum, cupiditate aperiam distinctio vero dolor est quibusdam sit rerum expedita tempore reiciendis quidem quisquam deserunt autem pariatur eos fugiat qui hic temporibus ullam dicta voluptatem sequi at iusto! Accusamus, iure, optio temporibus molestiae ab dolor blanditiis veritatis corporis eius reiciendis sed molestias obcaecati dolorem similique rerum illo excepturi.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>


